<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    
    
</head>

<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary" onclick="sendGET()"> 发送GET请求 </button>
        <button class="btn btn-warning" onclick="sendPOST()"> 发送POST请求 </button>
        <button class="btn btn-success" onclick="sendPut()"> 发送 PUT 请求 </button>
        <button class="btn btn-danger"  onclick="sendDELETE()"> 发送 DELETE 请求 </button>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>id</th>
                    <th>品牌</th>
                    <th>价格</th>
                    <th>颜色</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

    </div>
    <script>
        // react 和 vue 框架
        function sendGET(){
            // 语法一：当做函数来用，通过配置参数进行发送
            //  axios({配置项})
            /**
             * 配置项：
             *    method:get
             *    url:  
             *    params: query参数
             *    data：
             *    headers
             */
            axios({
                method:'get',
                url:'http://zyx.com:8080/server',

                params:{
                    a:1,
                    b:2
                },
                headers:{
                    z:3,
                    x:4
                }
            })
        }
        function sendPOST(){
            axios({
                method:'post',
                url:'http://zyx.com:8080/server',
                // data:'name=yuonly&age=10'  => Content-type:application/x-www-form-urlencoded
                data:{  // Content-type:application/json
                    name:"zyx",
                    age:90
                },
                params:{
                    z:1000,
                    y:2000
                },
                headers:{
                    z1:3,
                    x1:4
                }
            })
        }

        function sendPut(){
            axios({
                method:'put',
                url:'http://zyx.com:8080/server',
                data:{
                    zyx:'yuonly',
                    age:100
                }
            })
        }

        function sendDELETE(){
            axios({
                method:'delete',
                url:'http://zyx.com:8080/server',
                // get请求携带参数：
                // 1. query 参数： 地址栏中以查询字符串形式出现 ?a=1&b=2
                // 2. params参数： zyx.com/p/1/yuonly      /p/:id/:name  直接写在url地址栏中
                params:{
                    a:1,
                    b:2
                }
            })
        }
        
    </script>
</body>

</html>